<template>
    <div id="teamCardList">
        <van-card
            v-for="team in props.teamList"
            :key="team.id"
            :desc="team.description"
            :title="team.name"
            thumb="https://app6882.acapp.acwing.com.cn/api/uploads/1733235689940_%25E6%259C%25AC%25E6%259C%25BA%25E7%2585%25A7%25E7%2589%25871665906279975.png"
        >
            <template #tags>
                <van-tag
                    plain
                    type="primary"
                    style="margin-right: 8px; margin-top: 8px"
                >
                    {{ teamStatusEnum[team.status] }}
                </van-tag>
            </template>
            <template #price>
                <div>{{ '最大人数：' + team.maxNum }}</div>
            </template>
            <template #bottom>
                <div>{{ '过期时间：' + team.expireTime }}</div>
                <div>{{ '创建时间：' + team.createTime }}</div>
            </template>
            <template #footer>
                <van-button type="primary" size="small" @click="doJoinTeam(team.id)">加入队伍</van-button>
            </template>
        </van-card>
    </div>
</template>

<script setup lang="ts">
import type { TeamType } from '../models/team'
import { teamStatusEnum } from '../constants/team.ts'
import myAxios from '../plugins/myAxios.ts'
import { showFailToast, showSuccessToast } from 'vant'

interface TeamListProps {
    teamList: TeamType[]
}

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
const props = withDefaults(defineProps<TeamListProps>(), {
    // eslint-disable-next-line vue/require-valid-default-prop
    teamList: []
})

const doJoinTeam = (id: number) => {
    myAxios.post("/team/join", {
        id: id,
    }).then((res) => {
        if (res['code'] === 0) {
            showSuccessToast("加入成功");
        } else {
            showFailToast(res['description']);
        }
    })
}

</script>

<style scoped>
#teamCardList :deep(.van-image__img) {
    height: 128px;
    object-fit: unset;
}
</style>
